<template>
<div>
    <div class="item" @click="clickBtn">
            <text class="name">厂家设备:</text>
            <wx-button 
            height="100px"
            width="500px"
            borderRadius="0px"
            backgroundColor="#fff"
            textColor="rgba(62,175,252,1)"
            textFontSize="32px"
            @wxClick="visible=true" class="listItem">{{ selectedData.name }}</wx-button>
        </div>
    <wx-popup 
            :visible="visible" 
            position="bottom"
            :hasOverley="true"
            height="488px"
            ref="wxPopup"
            @wxChange="handleBottom">
            <div>
                <div class="btn-wrap">
                    <text class="btn" @click="handleCancel">取消</text>
                    <text class="btn" @click="handleFinish">完成</text>
                </div>
                <wx-picker :data="data" :visible="visible" @wxChange="handleChange"></wx-picker>
            </div>
        </wx-popup>
</div>
</template>
<script>
import { WxPicker, WxButton, WxPopup } from 'weex-droplet-ui'
import event from '@/net/event'
import { getCache, removeCache } from '@/util/storageUtils'
import { CTCE_AZCJDM_SBXH } from '@/config/storageTypes'
const PICKER_DATA = {
        list: [],
        defaultValue: { name: '请输入厂家设备'},
        displayValue (item) {
            return item.name;
        }
    };
export default {
    name: 'SBLX',
    data () {
        return {
            data: PICKER_DATA,
            visible: false,
            selectedData: PICKER_DATA.defaultValue,
        }
    },
    components: {
        WxPicker,
        WxButton,
        WxPopup
    },
    created(){
        this.clickBtn()
    },
    methods: {
        clickBtn() {
            getCache(CTCE_AZCJDM_SBXH).then(res => {
                const user = JSON.parse(res)
                event.getAzSbxh(user.sbcjdm, user.sblx).then(resData => {
                    resData.data.datalist.map(item => {
                        item.name = item.SBXH,
                        item.value = item.SBLX_ID
                        this.data.list.push(item)
                        // this.visible = true
                    })
                    storage.removeItem(CTCE_AZCJDM_SBXH)
                })
            })
        },
        handleBottom (visible) {
            this.visible = visible;
        },

        handleChange (data) {
            this.selectedData = data;
            let obj = {name: '', value: ''}
            obj.name = this.selectedData.name
            obj.value = this.selectedData.value
            this.$emit('sbxhEvent', obj)
        },

        handleCancel () {
            this.$refs.wxPopup.hide();
        },

        handleFinish () {
            this.$refs.wxPopup.hide();
        },
    }
}
</script>
<style scoped>
.item{
    width: 750px;
    height: 90px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #fff;
}
.name{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
    padding-right: 20px;
}
.listItem{
    position: relative;
}
.btn-wrap {
    background-color: #eee;
    height: 88px;
    font-size: 38px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.btn {
    line-height: 88px;
    height: 88px;
    width: 100px;
    text-align: center;
    color: #007aff;
    font-size: 32px;
}
</style>
